<template>
	<view class="page page-my-demand">
		<view class="pt-10px pb-10px mb1px bg-white sticky top-0 z-100">
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>
		<template v-if="list.length">
			<template v-if="current < 2">
				<view class="block-item p-10px mb10px"  v-for="i in list" :key="current? i.supply_id : i.askbuy_id" 
				@click="goDemandDetail(current? i.supply_id : i.askbuy_id)"
				>
					<view flex items-baseline pb-10px>
						<view v-for="v in i.tags" mr-6px>
							<uni-tag :text="v" type="error" size="mini" />
						</view>
						<view class="font-600 text-lg mt-4px ml-5px">{{i.description}}</view>
					</view>
					<view flex items-center pt-5px pb5px v-if="i.category_name">
						<view class="icon icon-type"></view>
						<view text-sm ml-10px mt--2px>类型： {{i.category_name}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-name"></view>
						<view text-sm ml-10px mt--2px>名称： {{i.name}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-num"></view>
						<view text-sm ml-10px mt--2px>数量： {{i.number}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-price"></view>
						<view text-sm ml-10px mt--2px>价格： {{i.price_name}}</view>
					</view>
					<view flex items-center pt-5px pb5px>
						<view class="icon icon-region"></view>
						<view text-sm ml-10px mt--2px flex> 
							<view>地区：</view>
							<view flex-1> 
								<text mr-10px mb-10px v-for="v in Object.values(i.region_name)">{{ v }}</text>
							</view>
						</view>
					</view>
					<view flex items-center pt-5px pb5px v-if="!current">
						<view class="icon icon-time"></view>
						<view text-sm ml-10px mt--2px>时效： {{i.ageing_name}}</view>
					</view>
					<view class="overflow-auto whitespace-nowrap pt-5px pb10px" v-if="i.images?.length">
						<image class="image" v-for="img in i.images" :key="img" :src="img" lazy-load mode="center" />
					</view>
					<view flex items-center pt-5px pb5px justify-between>
						<view flex items-center>
							<template v-if="current">
								<image v-if="i.firm?.logo" :src="i.firm?.logo" class="circle1" mode="scaleToFill" />
								<view v-else class="icon icon-enterprise-logo"></view>
							</template>
							<view v-else class="circle1 bg-blue-4 text-xs" >求购方</view>
							<view ml10px>
								<view text-sm v-if="current">{{i.firm?.firm_name}}</view>
								<view text-sm v-else>求购方</view>
								<view text-xs mt5px color-bluegray>{{i.updated_at}}</view>
							</view>
						</view>
						
						<view class="contact bg-blue-1" v-if="(current && i.firm?.contact_phone) || i.member?.mobile" @click.stop="phoneCall(i)">
							<view class="icon icon-tel"></view>
							<view pl-2px>联系</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else-if="current == 2">
				<view class="card-item flex" v-for="item in list" :key="item.goods_id" @click="goDetail(item.goods_id)">
					<image v-if="item.images?.length" w-200 h-180 :src="item.images[0]" />
					<view flex-1 ml-3>
						<view text-base fw-600 truncate>{{ item.name }}</view>
						<view text-s c-gray-5 truncate>{{ item.description }}</view>
						<view c-red-5 fw-500 text-base>￥{{ item.price || '可议价' }}</view>
						<view text-s c-gray-5 truncate pb-4px>热卖：{{ item.putaway }}</view>
					</view>
				</view>

			</template>
			<template v-else-if="current == 3">
				<view class="card-item" v-for="item in list" :key="item.id">
					<view class="title" @click="goEnerpriseDetail(item.id)">
						<view class="image">
						<image v-if="item.logo" mode="aspectFill" :src="item.logo"></image>
						<view v-else class="icon icon-enterprise-logo"></view>
						<span v-if="item.member && item.member.level !== 'free'"  
							:class="`icon icon-vip absolute bottom--4 right--16 text-48 color-${item.member.level}`">
						</span>
					</view>
					<view flex-1 overflow-hidden>
						<view truncate text-base pb-4px>
							{{ item.firm_name }}
							<span v-if="item.certify && item.certify.member_type == 'boss'" c-blue-5 text-lg class="icon icon-enterprise"></span>
							<span v-if="item.certify && item.certify.member_type == 'employee'" c-blue-5 text-lg class="icon icon-personal"></span>
						</view>
						<view truncate text-xs c-gray-5>{{ item.company_intro }}</view>
					</view>
					</view>
					<view class="content">
						<view class="content-item pt-2" v-for="goods in item.prdoucts.splice(0,2)" :key="goods.goods_id" @click="goDetail(goods.goods_id)">
							<image mode="aspectFill" :src="goods.image_thumb"></image>
							<view truncate >{{goods.name}}</view>
							<view truncate text-xs c-gray-6>{{goods.description}}</view>
						</view>
					</view>
				</view>

			</template>
		</template>
		<view v-else-if="!loading" flex items-center justify-center flex-col pt-100px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>

	</view>
	<contact :phone="requirePhone" :id="require_id" v-model:show="showContactModel" />

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { makePhoneCall } from '@/common/utils'

	const tabs = ['求购','供应','商品','企业']
	const tabsValues = ['askbuy','supply','goods','firm']
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loading = ref(false)
	const loadedAll = ref(false)
	const current = ref(0)
	const list = ref([])

	getList()
	async function getList() {
		if(loadedAll.value) return
		loading.value = true
		const data = await api.myCollect({
			page_size: page_size.value,
			page_no: page_no.value,
			type: tabsValues[current.value]
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}
	
	const showContactModel = ref(false)
	const requirePhone = ref('')
	const require_id = ref('')
	const phoneCall = i => {
		if(current.value) {
			makePhoneCall({
				phone: i.firm.contact_phone,
				id: i.supply_id,
				source: 'supply'
			})
			return
		}
		requirePhone.value = i.member.mobile
		require_id.value = i.member.askbuy_id
		showContactModel.value = true
	}
	
	const goDemandDetail = id => {
		uni.navigateTo({
			url: `/pages/demand/detail?id=${id}&type=${current.value? 'supply':'require'}`
		})
	}
	const goEnerpriseDetail = id => {
		uni.navigateTo({
			url: `/pages/enterprise/detail?id=${id}`
		})
	}
	const goDetail = id => {
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}

</script>

<style lang="scss">
.page-my-demand {
	background-color: $uni-bg-color-hover;

	.block-item {
		background-color: white;
		.icon {
			color: gray;
		}
		.image {
			width: 100px;
			height: 100px;
			margin-right: 10px;
			border-radius: 8px;
		}

		.circle1 {
			width: 40px;
			height: 40px;
			padding: 4px;
			border-radius: 100%;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.contact {
			display: flex;
			align-items: center;
			color: $uni-color-blue;
			border-radius: 100px;
			padding: 4px 10px;

			.icon {
				color: $uni-color-blue;
				margin-top: 2px;
				margin-right: 2px;
			}
		}
	}

	.card-item {
		padding: 20upx;
		box-shadow: 0 0 4px 0 silver;
		margin-bottom: 20upx;
		background: white;
		.title {
			display: flex;
			align-items: center;
			.image {
				position: relative;
				width: 80upx;
				height: 80upx;
				margin-right: 24upx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
		}
		.content {
			display: flex;
			justify-content: space-between;
		}

		.content-item {
			width: 49%;
			image {
				width: 100%;
				height: 400upx;
			}
		}
	}

	.icon.icon-enterprise-logo {
		font-size: 80upx;
		color: $uni-color-navigator;
	}

}

</style>

